<template>
	<div class="app1" @click="handlePause">
		<div class="video-js" :class="[{hiddenProgressControl}]" ref="videos">
		</div>
		<!-- <div v-if="playIng==false" class="play" @click="handlePaly">播放</div>
		<div v-else class="play" @click="handlePause">暂停</div> -->
	</div>
</template>

<script>
	import videojs from 'video.js'
	import 'video.js/dist/video-js.css';
	export default {
		props: {
			src: {
				// 视频地址，必传
				type: String,
				default: '',
				required: true
			},
			id: {
				// video的id，必传
				type: String,
				default: 'video',
				required: true
			},
			width: {
				type: String,
				default: '100vw'
			},
			height: {
				type: String,
				default: '92vh'
			},
			poster: {
				type: String,
				default: ''
			},
			hiddenProgressControl: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				// H5 相关状态
				player: null,
				visibilityChange: null,
				hidden: null,
				playIng: false,
				video: null
			}
		},
		async mounted() {
			
			// 动态加载video.js CDN资源
			this.setupVisibilityAPI();
			// 等待资源加载完成
			await this.$nextTick()
			setTimeout(() => {
				this.setupVideoPlayer();
			}, 300);

		},
		
		beforeDestroy() {
			console.log('销毁了');
			// 组件销毁时移除事件监听
			document.removeEventListener(this.visibilityChange,
				this.handleVisibilityChange);
			let video = this.video
			if (video) {
				this.$refs.videos.innerHTML = ''
				// elem.parentNode.removeChild(elem)
			}
			// 销毁播放器
			if (this.player) {
				this.player.dispose();
				this.player = null;
			}
		},

		methods: {
			setupVisibilityAPI() {
				// 设置页面可见性API的兼容性处理
				if (typeof document.hidden !== "undefined") {
					this.hidden = "hidden";
					this.visibilityChange = "visibilitychange";
				} else if (typeof document.msHidden !== "undefined") {
					this.hidden = "msHidden";
					this.visibilityChange = "msvisibilitychange";
				} else if (typeof document.webkitHidden !== "undefined") {
					this.hidden = "webkitHidden";
					this.visibilityChange = "webkitvisibilitychange";
				}
				// 添加事件监听
				document.addEventListener(this.visibilityChange, this.handleVisibilityChange.bind(this), false);
			},
			handleVisibilityChange() {
				if (!this.player) return;
				if (document[this.hidden]) {
					// 页面不可见时暂停播放
					this.player.pause();
				} else {
					// 页面重新可见时恢复播放
					this.player.play().catch(e => {
						console.log('自动播放失败:', e);
					});
				}
			},
			setupVideoPlayer() {
				let that = this
				this.video = document.createElement('video');
				let video = this.video
				video.id = this.id;
				video.className = 'video-js vjs-default-skin';
				video.setAttribute('playsinline', true);
				video.setAttribute('poster', this.poster);
				video.setAttribute('webkit-playsinline', true);
				video.setAttribute('x5-video-player-type', 'h5');

				video.style.width = this.width
				video.style.height = this.height
				video.style.objectFit = 'fill'

				let source = document.createElement('source');
				source.src = this.src;
				video.appendChild(source);
				this.$refs.videos.appendChild(video);

				this.player = videojs(
					this.id, {
						autoDisable: true,
						preload: 'none',
						language: 'zh-CN',
						fluid: true,
						muted: false,
						// aspectRatio: '16:9',
						controls: true,
						autoplay: true,
						loop: true,
						controlBar: {
							volumePanel: {
								inline: true
							},
							timeDivider: true,
							durationDisplay: true,
							progressControl: true,
							remainingTimeDisplay: true,
							fullscreenToggle: true,
							pictureInPictureToggle: false,
						}
					},
					function() {

						this.on("loadstart", function() {
							// console.log("开始请求数据 ");
						})
						this.on("progress", function() {
							// console.log("正在请求数据 ");
						})
						this.on("loadedmetadata", function() {
							// console.log("获取资源长度完成 ")
						})
						this.on("canplaythrough", function() {
							// console.log("视频源数据加载完成")
						})
						this.on("waiting", function() {
							// console.log("等待数据")
						});
						this.on("play", function() {
							// console.log("视频开始播放")
						});
						this.on("playing", function() {
							// console.log("视频播放中")
							that.playIng = true
						});
						this.on("pause", function() {
							// console.log("视频暂停播放")
							that.playIng = false
						});
						this.on("ended", function() {
							// console.log("视频播放结束");
						});
						this.on("error", function() {
							// console.log("加载错误")
						});
						this.on("seeking", function() {
							// console.log("视频跳转中");
						})
						this.on("seeked", function() {
							// console.log("视频跳转结束");
						})
						this.on("ratechange", function() {
							// console.log("播放速率改变")
						});
						this.on("timeupdate", function() {
							// console.log("播放时长改变");
						})
						this.on("volumechange", function() {
							// console.log("音量改变");
						})
						this.on("stalled", function() {
							// console.log("网速异常");
						})
						this.on('touchend', function() {
							if (that.playIng) {
								that.handlePause()
							} else {
								that.handlePaly()
							}
						})
					}
				);
				document.querySelector('.vjs-fullscreen-control').classList.add('uni-video-fullscreen')
			},
			handlePaly() {
				if (!this.playIng) {
					this.player.play()
				}
				// if (this.playIng) {
				// 	this.player.pause()
				// } else {
				// 	this.player.play()
				// }
			},
			handlePause() {
				this.player.pause()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.app1 {
		background: #000;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		.play {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: white;
		}
	}

	.video-js {
		width: 100%;
		height: 100%;
		border-radius: 0 0 26rpx 26rpx;
		overflow: hidden;

		&:focus-visible {
			outline: none !important;
		}

		&.hiddenProgressControl {
			::v-deep {
				.vjs-control-bar {
					visibility: hidden;
				}
			}
		}

		::v-deep {

			.vjs-tech {}

			video:focus-visible,
			button:focus-visible {
				outline: none !important;
				border: none;
			}

			button {
				outline: none;
			}

			.vjs-poster {
				background-size: 100% 100%;
			}

			.vjs-control-bar {
				align-items: center;
			}

			.vjs-big-play-button {
				border: none;
				background-color: transparent;
				color: rgba(255, 255, 255, 0.8);
				font-size: 150px;
			}

			.vjs-remaining-time {
				line-height: 70rpx;
			}

			// .vjs-fullscreen-control,
			.vjs-volume-panel {
				display: none;
			}

			.vjs-fullscreen-control {
				border: none;
				background-color: transparent;

				.vjs-icon-placeholder {
					display: none;
				}
			}

			.vjs-play-control {
				background-color: transparent;
				border: none;
				color: white;
			}

			.vjs-big-play-button {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}

			.uni-video-fullscreen {
				width: 34px !important;
				height: 34px !important;
			}

			.vjs-control-bar {
				position: absolute;
				bottom: 0rpx;
				z-index: 10;
				left: 0;
				height: 70rpx;
			}
		}
	}

	// uni-video-fullscreen
</style>